<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>红包中心 - 高级筛选</title>
    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome 图标 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
    
    <style>
        :root {
            --primary: #FF5252;
            --secondary: #FFD700;
            --light: #FFF8E1;
            --dark: #E63946;
            --gray: #757575;
            --light-gray: #F5F5F5;
            --border-radius: 12px;
            --card-shadow: 0 3px 10px rgba(255, 82, 82, 0.15);
        }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
            background-color: #FFF5F5;
            color: #333;
            padding-top: 56px;
            padding-bottom: 60px;
        }
        
        /* 顶部导航 */
        .top-nav {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            height: 56px;
            background-color: white;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 16px;
            z-index: 1000;
            box-shadow: 0 1px 3px rgba(0,0,0,0.05);
        }
        
        .nav-title {
            font-size: 18px;
            font-weight: 600;
            color: #333;
        }
        
        .nav-btn {
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            background: none;
            border: none;
            color: #333;
            font-size: 20px;
        }
        
        /* 筛选区域 */
        .filter-container {
            background-color: white;
            padding: 12px;
            border-bottom: 1px solid #eee;
        }
        
        /* 搜索框 */
        .search-box {
            position: relative;
            margin-bottom: 12px;
        }
        
        .search-input {
            width: 100%;
            padding: 10px 16px 10px 40px;
            border-radius: 20px;
            border: 1px solid #eee;
            font-size: 14px;
            background-color: var(--light-gray);
        }
        
        .search-icon {
            position: absolute;
            left: 14px;
            top: 50%;
            transform: translateY(-50%);
            color: var(--gray);
        }
        
        /* 筛选标签栏 */
        .filter-tabs {
            display: flex;
            overflow-x: auto;
            scrollbar-width: none;
            padding-bottom: 4px;
            gap: 8px;
        }
        
        .filter-tabs::-webkit-scrollbar {
            display: none;
        }
        
        .filter-tab {
            flex-shrink: 0;
            padding: 6px 14px;
            border-radius: 20px;
            font-size: 14px;
            border: none;
            background-color: var(--light-gray);
            color: var(--gray);
            display: flex;
            align-items: center;
            gap: 6px;
        }
        
        .filter-tab.active {
            background-color: var(--primary);
            color: white;
        }
        
        /* 高级筛选下拉菜单 */
        .advanced-filter {
            position: relative;
            margin-top: 8px;
        }
        
        .filter-btn {
            width: 100%;
            padding: 8px 16px;
            border-radius: var(--border-radius);
            border: 1px solid #eee;
            background-color: white;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 14px;
            color: #333;
        }
        
        .filter-dropdown {
            position: absolute;
            top: 100%;
            left: 0;
            right: 0;
            background-color: white;
            border-radius: var(--border-radius);
            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
            z-index: 900;
            margin-top: 4px;
            overflow: hidden;
            display: none;
        }
        
        .filter-dropdown.show {
            display: block;
        }
        
        .filter-section {
            padding: 12px 16px;
            border-bottom: 1px solid #eee;
        }
        
        .filter-section-title {
            font-size: 15px;
            font-weight: 600;
            margin-bottom: 8px;
        }
        
        .filter-options {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }
        
        .filter-option {
            padding: 6px 12px;
            border-radius: 16px;
            font-size: 13px;
            border: 1px solid #eee;
            background-color: white;
            color: #333;
        }
        
        .filter-option.active {
            background-color: var(--primary);
            color: white;
            border-color: var(--primary);
        }
        
        .filter-actions {
            display: flex;
            padding: 12px;
            gap: 10px;
        }
        
        .filter-action-btn {
            flex: 1;
            padding: 8px;
            border-radius: 8px;
            font-size: 14px;
            font-weight: 500;
        }
        
        .reset-btn {
            background-color: white;
            border: 1px solid #eee;
            color: var(--gray);
        }
        
        .confirm-btn {
            background-color: var(--primary);
            border: none;
            color: white;
        }
        
        /* 红包列表容器 */
        .redpack-container {
            padding: 12px;
        }
        
        /* 结果统计 */
        .result-stats {
            font-size: 13px;
            color: var(--gray);
            padding: 0 12px 8px;
        }
        
        /* 红包样式 (保持与之前相同的红包基础样式) */
        .redpack-item {
            margin-bottom: 12px;
            border-radius: var(--border-radius);
            overflow: hidden;
            background-color: white;
            box-shadow: var(--card-shadow);
            position: relative;
            transition: transform 0.2s ease;
        }
        
        .redpack-item:hover {
            transform: translateY(-2px);
        }
        
        .redpack-header {
            display: flex;
            align-items: center;
            padding: 12px 16px;
        }
        
        .sender-avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            object-fit: cover;
            margin-right: 12px;
        }
        
        .sender-info {
            flex: 1;
        }
        
        .sender-name {
            font-size: 15px;
            font-weight: 500;
            margin-bottom: 2px;
        }
        
        .redpack-time {
            font-size: 12px;
            color: var(--gray);
        }
        
        /* 不同类型红包样式 */
        .normal-redpack {
            background: linear-gradient(135deg, #FF5252, #E63946);
            color: white;
        }
        
        .normal-redpack .redpack-content {
            padding: 16px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .redpack-msg {
            font-size: 16px;
            font-weight: 500;
        }
        
        .redpack-icon {
            font-size: 24px;
        }
        
        .normal-redpack .redpack-footer {
            background-color: white;
            padding: 10px 16px;
            text-align: center;
            font-size: 13px;
            color: var(--gray);
        }
        
        .lucky-redpack .redpack-content {
            padding: 16px;
        }
        
        .lucky-info {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 10px;
        }
        
        .lucky-amount {
            font-size: 22px;
            font-weight: 700;
            color: var(--primary);
        }
        
        .lucky-count {
            font-size: 13px;
            color: var(--gray);
        }
        
        .lucky-list {
            display: flex;
            overflow-x: auto;
            padding-bottom: 8px;
            gap: 10px;
        }
        
        .lucky-person {
            display: flex;
            flex-direction: column;
            align-items: center;
            min-width: 50px;
        }
        
        .lucky-avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background-color: var(--light);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            color: var(--dark);
            margin-bottom: 4px;
        }
        
        .lucky-name {
            font-size: 11px;
            text-align: center;
            color: #333;
        }
        
        .lucky-money {
            font-size: 12px;
            color: var(--primary);
            font-weight: 500;
        }
        
        .task-redpack .redpack-content {
            padding: 16px;
            display: flex;
            align-items: center;
            gap: 16px;
        }
        
        .task-icon {
            width: 50px;
            height: 50px;
            border-radius: 10px;
            background-color: var(--light);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
            color: var(--primary);
        }
        
        .task-info {
            flex: 1;
        }
        
        .task-title {
            font-size: 15px;
            font-weight: 500;
            margin-bottom: 4px;
        }
        
        .task-desc {
            font-size: 12px;
            color: var(--gray);
            margin-bottom: 6px;
        }
        
        .task-progress {
            height: 6px;
            background-color: #eee;
            border-radius: 3px;
            overflow: hidden;
        }
        
        .progress-bar {
            height: 100%;
            background-color: var(--secondary);
            border-radius: 3px;
        }
        
        .task-redpack .redpack-footer {
            background-color: #f9f9f9;
            padding: 10px 16px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .task-reward {
            font-size: 14px;
            color: var(--primary);
            font-weight: 500;
        }
        
        .task-btn {
            padding: 6px 14px;
            background-color: var(--primary);
            color: white;
            border: none;
            border-radius: 20px;
            font-size: 13px;
            font-weight: 500;
        }
        
        .expired-redpack {
            filter: grayscale(1);
            opacity: 0.7;
        }
        
        .expired-redpack .redpack-content {
            padding: 16px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .expired-msg {
            font-size: 15px;
            color: var(--gray);
        }
        
        .expired-icon {
            font-size: 20px;
            color: var(--gray);
        }
        
        /* 红包状态标签 */
        .redpack-tag {
            position: absolute;
            top: 12px;
            right: 12px;
            padding: 2px 8px;
            border-radius: 12px;
            font-size: 11px;
            font-weight: 500;
        }
        
        .tag-unopened {
            background-color: var(--secondary);
            color: #fff;
        }
        
        .tag-opened {
            background-color: #e3f2fd;
            color: #1976d2;
        }
        
        .tag-expired {
            background-color: #f5f5f5;
            color: var(--gray);
        }
        
        /* 空状态 */
        .empty-state {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 40px 20px;
            text-align: center;
        }
        
        .empty-icon {
            font-size: 60px;
            color: #ffccd5;
            margin-bottom: 20px;
        }
        
        .empty-text {
            font-size: 16px;
            color: var(--gray);
            margin-bottom: 24px;
        }
        
        .empty-btn {
            padding: 8px 24px;
            background-color: var(--primary);
            color: white;
            border: none;
            border-radius: 20px;
            font-size: 15px;
            font-weight: 500;
        }
        
        /* 底部导航 */
        .bottom-nav {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            height: 60px;
            background-color: white;
            display: flex;
            justify-content: space-around;
            align-items: center;
            border-top: 1px solid #eee;
            z-index: 1000;
        }
        
        .nav-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            color: var(--gray);
            font-size: 10px;
            gap: 4px;
            text-decoration: none;
            flex: 1;
        }
        
        .nav-item.active {
            color: var(--primary);
        }
        
        .nav-icon {
            font-size: 20px;
        }
        
        /* 红包弹窗 */
        .redpack-modal {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(0,0,0,0.7);
            display: none;
            justify-content: center;
            align-items: center;
            z-index: 2000;
            padding: 20px;
        }
        
        .modal-content {
            width: 100%;
            max-width: 320px;
            background-color: white;
            border-radius: 16px;
            overflow: hidden;
            text-align: center;
            animation: popIn 0.3s ease;
        }
        
        @keyframes popIn {
            0% { transform: scale(0.8); opacity: 0; }
            70% { transform: scale(1.05); }
            100% { transform: scale(1); opacity: 1; }
        }
    </style>
</head>
<body>
    <!-- 顶部导航 -->
    <div class="top-nav">
        <button class="nav-btn" id="backBtn">
            <i class="fas fa-arrow-left"></i>
        </button>
        <div class="nav-title">红包中心</div>
        <button class="nav-btn" id="moreBtn">
            <i class="fas fa-cog"></i>
        </button>
    </div>
    
    <!-- 筛选区域 -->
    <div class="filter-container">
        <!-- 搜索框 -->
        <div class="search-box">
            <i class="fas fa-search search-icon"></i>
            <input type="text" class="search-input" placeholder="搜索红包（输入发送者或内容）">
        </div>
        
        <!-- 快速筛选标签 -->
        <div class="filter-tabs">
            <button class="filter-tab active" data-filter="all">
                <i class="fas fa-th"></i> 全部
            </button>
            <button class="filter-tab" data-filter="unopened">
                <i class="fas fa-lock"></i> 未拆开
            </button>
            <button class="filter-tab" data-filter="opened">
                <i class="fas fa-unlock"></i> 已拆开
            </button>
            <button class="filter-tab" data-filter="task">
                <i class="fas fa-tasks"></i> 任务红包
            </button>
            <button class="filter-tab" data-filter="lucky">
                <i class="fas fa-random"></i> 拼手气
            </button>
        </div>
        
        <!-- 高级筛选 -->
        <div class="advanced-filter">
            <button class="filter-btn" id="advancedFilterBtn">
                <span>高级筛选</span>
                <i class="fas fa-chevron-down"></i>
            </button>
            
            <!-- 高级筛选下拉菜单 -->
            <div class="filter-dropdown" id="filterDropdown">
                <!-- 时间筛选 -->
                <div class="filter-section">
                    <div class="filter-section-title">时间范围</div>
                    <div class="filter-options">
                        <button class="filter-option active">全部时间</button>
                        <button class="filter-option">今天</button>
                        <button class="filter-option">近7天</button>
                        <button class="filter-option">近30天</button>
                        <button class="filter-option">自定义</button>
                    </div>
                </div>
                
                <!-- 金额筛选 -->
                <div class="filter-section">
                    <div class="filter-section-title">金额范围</div>
                    <div class="filter-options">
                        <button class="filter-option active">全部金额</button>
                        <button class="filter-option">0-10元</button>
                        <button class="filter-option">10-50元</button>
                        <button class="filter-option">50-100元</button>
                        <button class="filter-option">100元以上</button>
                    </div>
                </div>
                
                <!-- 来源筛选 -->
                <div class="filter-section">
                    <div class="filter-section-title">红包来源</div>
                    <div class="filter-options">
                        <button class="filter-option active">全部来源</button>
                        <button class="filter-option">个人</button>
                        <button class="filter-option">群组</button>
                        <button class="filter-option">官方活动</button>
                        <button class="filter-option">商家推广</button>
                    </div>
                </div>
                
                <!-- 操作按钮 -->
                <div class="filter-actions">
                    <button class="filter-action-btn reset-btn" id="resetFilter">重置</button>
                    <button class="filter-action-btn confirm-btn" id="confirmFilter">确认筛选</button>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 结果统计 -->
    <div class="result-stats">找到 6 个红包</div>
    
    <!-- 红包列表容器 -->
    <div class="redpack-container">
        <!-- 1. 普通红包 - 未拆开 -->
        <div class="redpack-item normal-redpack" data-type="unopened" data-amount="6.66" data-source="个人" data-date="今天">
            <div class="redpack-header">
                <img src="https://picsum.photos/id/64/100/100" alt="发送者头像" class="sender-avatar">
                <div class="sender-info">
                    <div class="sender-name">张小明</div>
                    <div class="redpack-time">今天 10:23</div>
                </div>
            </div>
            <div class="redpack-content">
                <div class="redpack-msg">恭喜发财，大吉大利！</div>
                <div class="redpack-icon">
                    <i class="fas fa-envelope"></i>
                </div>
            </div>
            <div class="redpack-footer">
                点击拆开红包
            </div>
            <span class="redpack-tag tag-unopened">未拆开</span>
        </div>
        
        <!-- 2. 拼手气红包 - 已拆开 -->
        <div class="redpack-item lucky-redpack" data-type="opened" data-amount="8.88" data-source="群组" data-date="昨天">
            <div class="redpack-header">
                <img src="https://picsum.photos/id/65/100/100" alt="发送者头像" class="sender-avatar">
                <div class="sender-info">
                    <div class="sender-name">公司年会群</div>
                    <div class="redpack-time">昨天 18:45</div>
                </div>
            </div>
            <div class="redpack-content">
                <div class="lucky-info">
                    <div class="lucky-amount">¥8.88</div>
                    <div class="lucky-count">28人已抢 · 共100元</div>
                </div>
                <div class="lucky-list">
                    <div class="lucky-person">
                        <div class="lucky-avatar">你</div>
                        <div class="lucky-name">你</div>
                        <div class="lucky-money">¥8.88</div>
                    </div>
                    <div class="lucky-person">
                        <div class="lucky-avatar">王</div>
                        <div class="lucky-name">王总</div>
                        <div class="lucky-money">¥12.50</div>
                    </div>
                    <div class="lucky-person">
                        <div class="lucky-avatar">李</div>
                        <div class="lucky-name">李姐</div>
                        <div class="lucky-money">¥5.20</div>
                    </div>
                </div>
            </div>
            <span class="redpack-tag tag-opened">已拆开</span>
        </div>
        
        <!-- 3. 任务红包 -->
        <div class="redpack-item task-redpack" data-type="task" data-amount="20.00" data-source="官方活动" data-date="3天前">
            <div class="redpack-header">
                <img src="https://picsum.photos/id/91/100/100" alt="发送者头像" class="sender-avatar">
                <div class="sender-info">
                    <div class="sender-name">邀请有礼活动</div>
                    <div class="redpack-time">3天前</div>
                </div>
            </div>
            <div class="redpack-content">
                <div class="task-icon">
                    <i class="fas fa-user-plus"></i>
                </div>
                <div class="task-info">
                    <div class="task-title">邀请3位新用户注册</div>
                    <div class="task-desc">完成任务即可领取红包奖励</div>
                    <div class="task-progress">
                        <div class="progress-bar" style="width: 66%;"></div>
                    </div>
                    <div class="mt-1 text-end text-xs text-gray">2/3 人</div>
                </div>
            </div>
            <div class="redpack-footer">
                <div class="task-reward">奖励 ¥20.00 红包</div>
                <button class="task-btn">去完成</button>
            </div>
        </div>
        
        <!-- 4. 过期红包 -->
        <div class="redpack-item expired-redpack" data-type="expired" data-amount="0" data-source="群组" data-date="1周前">
            <div class="redpack-header">
                <img src="https://picsum.photos/id/92/100/100" alt="发送者头像" class="sender-avatar">
                <div class="sender-info">
                    <div class="sender-name">老同学群</div>
                    <div class="redpack-time">1周前</div>
                </div>
            </div>
            <div class="redpack-content">
                <div class="expired-msg">春节快乐！迟到的祝福</div>
                <div class="expired-icon">
                    <i class="fas fa-envelope-open"></i>
                </div>
            </div>
            <span class="redpack-tag tag-expired">已过期</span>
        </div>
        
        <!-- 5. 拼手气红包 - 未拆开 -->
        <div class="redpack-item lucky-redpack" data-type="unopened" data-amount="unknown" data-source="群组" data-date="今天">
            <div class="redpack-header">
                <img src="https://picsum.photos/id/22/100/100" alt="发送者头像" class="sender-avatar">
                <div class="sender-info">
                    <div class="sender-name">部门福利群</div>
                    <div class="redpack-time">今天 09:15</div>
                </div>
            </div>
            <div class="redpack-content">
                <div class="lucky-info">
                    <div class="lucky-amount">点击抢红包</div>
                    <div class="lucky-count">12人已抢 · 剩余3个</div>
                </div>
                <div class="lucky-list">
                    <div class="lucky-person">
                        <div class="lucky-avatar">张</div>
                        <div class="lucky-name">小张</div>
                        <div class="lucky-money">¥6.66</div>
                    </div>
                    <div class="lucky-person">
                        <div class="lucky-avatar">刘</div>
                        <div class="lucky-name">刘哥</div>
                        <div class="lucky-money">¥9.99</div>
                    </div>
                </div>
            </div>
            <span class="redpack-tag tag-unopened">未拆开</span>
        </div>
        
        <!-- 6. 任务红包 -->
        <div class="redpack-item task-redpack" data-type="task" data-amount="5.00" data-source="官方活动" data-date="今天">
            <div class="redpack-header">
                <img src="https://picsum.photos/id/23/100/100" alt="发送者头像" class="sender-avatar">
                <div class="sender-info">
                    <div class="sender-name">每日签到</div>
                    <div class="redpack-time">今天 08:30</div>
                </div>
            </div>
            <div class="redpack-content">
                <div class="task-icon">
                    <i class="fas fa-calendar-check"></i>
                </div>
                <div class="task-info">
                    <div class="task-title">连续签到7天</div>
                    <div class="task-desc">完成任务即可领取红包奖励</div>
                    <div class="task-progress">
                        <div class="progress-bar" style="width: 28%;"></div>
                    </div>
                    <div class="mt-1 text-end text-xs text-gray">2/7 天</div>
                </div>
            </div>
            <div class="redpack-footer">
                <div class="task-reward">奖励 ¥5.00 红包</div>
                <button class="task-btn">去签到</button>
            </div>
        </div>
    </div>
    
    <!-- 底部导航 -->
    <div class="bottom-nav">
        <a href="#" class="nav-item">
            <i class="fas fa-home nav-icon"></i>
            <span>首页</span>
        </a>
        <a href="#" class="nav-item">
            <i class="fas fa-comment nav-icon"></i>
            <span>消息</span>
        </a>
        <a href="#" class="nav-item active">
            <i class="fas fa-red-envelope nav-icon"></i>
            <span>红包</span>
        </a>
        <a href="#" class="nav-item">
            <i class="fas fa-wallet nav-icon"></i>
            <span>钱包</span>
        </a>
        <a href="#" class="nav-item">
            <i class="fas fa-user nav-icon"></i>
            <span>我的</span>
        </a>
    </div>
    
    <!-- Bootstrap JS Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
    
    <script>
        // 筛选状态存储
        const filterState = {
            type: 'all',
            time: '全部时间',
            amount: '全部金额',
            source: '全部来源',
            search: ''
        };
        
        // 快速筛选标签切换
        const filterTabs = document.querySelectorAll('.filter-tab');
        const redpackItems = document.querySelectorAll('.redpack-item');
        const resultStats = document.querySelector('.result-stats');
        
        filterTabs.forEach(tab => {
            tab.addEventListener('click', function() {
                // 更新标签状态
                filterTabs.forEach(t => t.classList.remove('active'));
                this.classList.add('active');
                
                // 更新筛选状态
                filterState.type = this.getAttribute('data-filter');
                
                // 执行筛选
                applyFilters();
            });
        });
        
        // 高级筛选下拉菜单切换
        const advancedFilterBtn = document.getElementById('advancedFilterBtn');
        const filterDropdown = document.getElementById('filterDropdown');
        
        advancedFilterBtn.addEventListener('click', function() {
            filterDropdown.classList.toggle('show');
            // 切换箭头方向
            const icon = this.querySelector('i');
            icon.classList.toggle('fa-chevron-down');
            icon.classList.toggle('fa-chevron-up');
        });
        
        // 高级筛选选项选择
        const filterOptions = document.querySelectorAll('.filter-option');
        filterOptions.forEach(option => {
            option.addEventListener('click', function() {
                // 同组选项互斥
                const parent = this.closest('.filter-options');
                parent.querySelectorAll('.filter-option').forEach(opt => {
                    opt.classList.remove('active');
                });
                this.classList.add('active');
                
                // 更新筛选状态
                const section = this.closest('.filter-section');
                const sectionTitle = section.querySelector('.filter-section-title').textContent;
                
                if (sectionTitle.includes('时间')) {
                    filterState.time = this.textContent;
                } else if (sectionTitle.includes('金额')) {
                    filterState.amount = this.textContent;
                } else if (sectionTitle.includes('来源')) {
                    filterState.source = this.textContent;
                }
            });
        });
        
        // 重置筛选
        document.getElementById('resetFilter').addEventListener('click', function() {
            // 重置所有选项
            filterOptions.forEach(option => {
                option.classList.remove('active');
                if (option.textContent.includes('全部')) {
                    option.classList.add('active');
                }
            });
            
            // 重置筛选状态
            filterState.time = '全部时间';
            filterState.amount = '全部金额';
            filterState.source = '全部来源';
            filterState.search = '';
            
            // 重置搜索框
            document.querySelector('.search-input').value = '';
            
            // 重置快速筛选标签
            filterTabs.forEach(t => t.classList.remove('active'));
            filterTabs[0].classList.add('active');
            filterState.type = 'all';
            
            // 应用筛选
            applyFilters();
        });
        
        // 确认筛选
        document.getElementById('confirmFilter').addEventListener('click', function() {
            filterDropdown.classList.remove('show');
            // 切换箭头方向
            const icon = advancedFilterBtn.querySelector('i');
            icon.classList.add('fa-chevron-down');
            icon.classList.remove('fa-chevron-up');
            
            // 应用筛选
            applyFilters();
        });
        
        // 搜索功能
        const searchInput = document.querySelector('.search-input');
        searchInput.addEventListener('input', function() {
            filterState.search = this.value.toLowerCase().trim();
            applyFilters();
        });
        
        // 应用所有筛选条件
        function applyFilters() {
            let visibleCount = 0;
            
            redpackItems.forEach(item => {
                const type = item.getAttribute('data-type');
                const amount = parseFloat(item.getAttribute('data-amount')) || 0;
                const source = item.getAttribute('data-source');
                const date = item.getAttribute('data-date');
                const senderName = item.querySelector('.sender-name').textContent.toLowerCase();
                const message = item.querySelector('.redpack-msg, .task-title, .expired-msg')?.textContent.toLowerCase() || '';
                
                // 类型筛选
                let typeMatch = filterState.type === 'all' || 
                               (filterState.type === 'unopened' && type === 'unopened') ||
                               (filterState.type === 'opened' && type === 'opened') ||
                               (filterState.type === 'task' && type === 'task') ||
                               (filterState.type === 'lucky' && item.classList.contains('lucky-redpack'));
                
                // 时间筛选
                let timeMatch = true;
                if (filterState.time === '今天') {
                    timeMatch = date === '今天';
                } else if (filterState.time === '昨天') {
                    timeMatch = date === '昨天';
                } else if (filterState.time === '近7天') {
                    timeMatch = ['今天', '昨天', '3天前', '1周前'].includes(date);
                } else if (filterState.time === '近30天') {
                    timeMatch = !['1个月前', '3个月前', '1年前'].includes(date);
                }
                
                // 金额筛选
                let amountMatch = true;
                if (filterState.amount === '0-10元') {
                    amountMatch = amount > 0 && amount <= 10;
                } else if (filterState.amount === '10-50元') {
                    amountMatch = amount > 10 && amount <= 50;
                } else if (filterState.amount === '50-100元') {
                    amountMatch = amount > 50 && amount <= 100;
                } else if (filterState.amount === '100元以上') {
                    amountMatch = amount > 100;
                }
                
                // 来源筛选
                let sourceMatch = filterState.source === '全部来源' || 
                                 source.includes(filterState.source);
                
                // 搜索筛选
                let searchMatch = true;
                if (filterState.search) {
                    searchMatch = senderName.includes(filterState.search) || 
                                 message.includes(filterState.search);
                }
                
                // 所有条件都满足才显示
                if (typeMatch && timeMatch && amountMatch && sourceMatch && searchMatch) {
                    item.style.display = 'block';
                    visibleCount++;
                } else {
                    item.style.display = 'none';
                }
            });
            
            // 更新结果统计
            resultStats.textContent = `找到 ${visibleCount} 个红包`;
        }
        
        // 红包点击事件
        const unopenedRedpacks = document.querySelectorAll('[data-type="unopened"]');
        const redpackModal = document.createElement('div');
        redpackModal.className = 'redpack-modal';
        redpackModal.innerHTML = `
            <div class="modal-content">
                <div class="modal-header" style="background: linear-gradient(135deg, #FF5252, #E63946); padding: 20px 16px; color: white;">
                    <div>红包详情</div>
                    <div class="modal-title">恭喜发财，大吉大利！</div>
                </div>
                <div class="modal-body" style="padding: 20px 16px; text-align: center;">
                    <div>点击下方按钮拆开红包</div>
                    <button class="open-btn" style="background-color: var(--secondary); color: #d35400; border: none; border-radius: 50%; width: 60px; height: 60px; font-size: 24px; margin: 10px 0; box-shadow: 0 4px 8px rgba(255, 215, 0, 0.3);">
                        <i class="fas fa-gift"></i>
                    </button>
                    <div id="redpackResult" style="display: none;">
                        <div style="font-size: 32px; font-weight: 700; margin: 10px 0; color: var(--primary);">¥6.66</div>
                        <div>恭喜您抢到红包！</div>
                    </div>
                </div>
                <div class="modal-footer" style="padding: 16px; border-top: 1px solid #eee;">
                    <button class="close-btn" style="width: 100%; padding: 10px; background-color: white; border: 1px solid var(--primary); color: var(--primary); border-radius: 8px; font-size: 15px; font-weight: 500;">关闭</button>
                </div>
            </div>
        `;
        document.body.appendChild(redpackModal);
        
        const closeModal = redpackModal.querySelector('.close-btn');
        const openRedpack = redpackModal.querySelector('.open-btn');
        const redpackResult = redpackModal.querySelector('#redpackResult');
        
        unopenedRedpacks.forEach(redpack => {
            redpack.addEventListener('click', function() {
                // 重置弹窗状态
                redpackResult.style.display = 'none';
                openRedpack.style.display = 'block';
                // 显示弹窗
                redpackModal.style.display = 'flex';
            });
        });
        
        // 关闭弹窗
        closeModal.addEventListener('click', function() {
            redpackModal.style.display = 'none';
        });
        
        // 拆开红包
        openRedpack.addEventListener('click', function() {
            this.style.display = 'none';
            redpackResult.style.display = 'block';
            
            // 更新红包状态
            const firstUnopened = document.querySelector('[data-type="unopened"]');
            if (firstUnopened) {
                firstUnopened.setAttribute('data-type', 'opened');
                firstUnopened.querySelector('.redpack-tag').className = 'redpack-tag tag-opened';
                firstUnopened.querySelector('.redpack-tag').textContent = '已拆开';
                applyFilters(); // 重新应用筛选
            }
        });
        
        // 其他交互
        document.getElementById('backBtn').addEventListener('click', function() {
            history.back();
        });
        
        const taskBtns = document.querySelectorAll('.task-btn');
        taskBtns.forEach(btn => {
            btn.addEventListener('click', function() {
                const taskName = this.closest('.task-redpack').querySelector('.task-title').textContent;
                alert(`去完成任务：${taskName}`);
            });
        });
    </script>
</body>
</html>
